<template>
  <div>
    <section class="jumbotron">
      <h3 class="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;
        <button @click="searchUsers">Search</button>
      </div>
    </section>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Search",
  description: '',
  mixins: [],
  components: {},
  props: {},
  data() {
    return {
      keyWord: ''
    }
  },
  computed: {},
  watch: {},
  filters: {},
  created() {
  },
  mounted() {

  },
  destroyed() {
  },
  methods: {
    searchUsers() {
      this.$bus.$emit('updateList', {
        isFirst: false,
        isLoading: true,
        errMsg: '',
        users: []
      })
      axios.get(`https://api.github.com/search/users?q=${
          this.keyWord
      }`).then(
          response => {
            console.log('请求成功了', response.data.items)
            let data = {
              isLoading: false,
              errMsg: '',
              users: response.data.items
            }
            this.$bus.$emit('updateList', data)
          },
          error => {
            this.$bus.$emit('updateList', {
              isLoading: false,
              errMsg: error.message,
              users: []
            })
            console.log('请求失败了')
          }
      )
    }
  }
}
</script>

<style scoped>

</style>